import { useRoutes } from "react-router-dom";
import { lazy,Suspense } from "react";
import Home from '../views/Home'
import Context from '../views/Context'
import Slot from '../views/Slot'
import Suspen from '../views/Suspense'
import UI from '../views/UI'
// import About from '../views/About'
const About = lazy(()=>import('../views/About'))
const RouterView=()=>{
    const routes=useRoutes([
        {
            path:"/",
            element:<Home/>
        },{
            path:"/context",
            element:<Context/>
        },{
            path:"/slot",
            element:<Slot/>
        },{
            path:"/suspense",
            element:<Suspen/>
        },{
            path:"/Ui",
            element:<UI/>
        },
        {
            path:"/about",
            element:<Suspense fallback={<div>loading</div>}>
                <About/>
            </Suspense>
        }
    ])
    return routes
}
export default RouterView;